<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :inline="true" :model="pointsearchFrom">
        <el-form-item label="点位搜索：" style="width:300px;">
          <el-input v-model="pointsearchFrom.name" class="input1" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="区域搜索：" style="width:300px;">
          <el-select v-model="pointsearchFrom.regionId" placeholder="请选择" class="input1">
            <el-option v-for="(item,i) in search" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchList">查询</el-button>
      </el-form>

    </el-card>
    <el-card shadow="never">
      <el-button icon="el-icon-circle-plus-outline" size="small" class="btns" @click="addList">新建</el-button>
      <el-table
        :data="pointsearchList"
        style="width: 100%"
      >

        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="name"
          label="点位名称"
        />
        <el-table-column
          prop="region.name"
          label="所在区域"
        />
        <el-table-column
          prop="businessType.name"
          label="商圈类型"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
        />
        <el-table-column
          prop="name"
          label="详细地址"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="scope">
            <el-link type="primary" @click="seeDetails(scope.row)">查看详情</el-link>
            <el-link type="primary" @click="editList(scope.row)">修改</el-link>
            <el-link type="danger" @click="deleList(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pointsearchFrom.pageIndex"
        :page-sizes="[10, 15, 20]"
        :page-size="pointsearchFrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 点位详情对话框 -->
    <el-dialog
      title="点位详情"
      :visible.sync="pointDetailsdialog"
      width="40%"
    >
      <el-table
        :data="pointDetails"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="innerCode"
          label="机器编号"
          width="180"
        />
        <el-table-column
          prop="state"
          label="设备状态"
        />
        <el-table-column
          prop="lastSupplyTime"
          label="最后一次供货时间"
        />
      </el-table>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="修改点位"
      :visible.sync="editdialog"
      width="35%"
      @close="editclose"
    >
      <el-form ref="ruleForm" :model="editFrom" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="点位名称" prop="name">
          <el-input v-model="editFrom.name" />
        </el-form-item>
        <el-form-item label="所在区域:" prop="name">
          <el-select v-model="editFrom.regionId">
            <el-option v-for="(item,i) in search" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈:" prop="name">
          <el-select v-model="editFrom.businessId">
            <el-option v-for="(item,i) in shopping" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="name">
          <el-select v-model="editFrom.ownerName">
            <el-option v-for="(item,i) in partners" :key="i" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="name">
          <el-cascader
            v-model="values"
            :options="detailedAddress"
            :props="{ expandTrigger: 'hover',label:'label',value: 'label' }"
          />
          <el-input v-model="addrs" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialog = false">取 消</el-button>
        <el-button type="primary" @click="modifyTheCommit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增对话框 -->
    <el-dialog
      title="修改点位"
      :visible.sync="adddialog"
      width="35%"
      @close="addclose"
    >
      <el-form ref="ruleForm" :model="addFrom" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="点位名称" prop="name">
          <el-input v-model="addFrom.name" />
        </el-form-item>
        <el-form-item label="所在区域:" prop="name">
          <el-select v-model="addFrom.regionId">
            <el-option v-for="(item,i) in search" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈:" prop="name">
          <el-select v-model="addFrom.businessId">
            <el-option v-for="(item,i) in shopping" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="name">
          <el-select v-model="addFrom.ownerId">
            <el-option v-for="(item,i) in partners" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="name">
          <el-cascader
            ref="ascriptionref"
            v-model="values"
            :options="detailedAddress"
            :props="{ expandTrigger: 'hover',label:'label',value: 'value' }"
            @change="partnersChange"
          />
          <el-input v-model="addrs" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmTheAddition">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { PointSearchAPI, aListOfRegions, pointDetailsAPI, listOfBusinessDistrictsAPI, partnersAPI, modifyThePointAPI, deleteAPoint, newPointsAddedAPI } from '@/api/point'
import { region } from '@/views/node/areas.js'
export default {
  data() {
    return {
      // 详细地址
      detailedAddress: [],
      // 点位搜索
      pointsearchList: [],
      // 点位详情信息
      pointDetails: [],
      // 商圈列表数据
      shopping: [],
      // 商圈数据
      partners: [],
      // 点位搜索数据
      pointsearchFrom: {
        pageIndex: 1,
        pageSize: 10,
        regionId: '',
        name: ''
      },
      values: [],
      // 商品列表渲染数据
      editFrom: {
        // 名称
        name: '',
        // 所属区域id
        regionId: '',
        // 合作商
        ownerName: '',
        // 所属商圈id
        businessId: null,
        // 区域id
        areaCode: null,
        // 详细地址
        addr: ''
      },

      // 转换数据
      ids: null,
      addrs: '',
      addFrom: {
        // 名称
        name: '',
        // 所属区域id
        regionId: '',
        // 合作商
        // 所属商圈id
        businessId: null,
        // 区域id
        areaCode: null,
        // 详细地址
        addr: '',
        // 创建人id
        createUserId: 1,
        // 合作商id
        ownerId: ''
      },
      totalCount: null,
      // 搜索
      search: [],
      // 点位详情对话框
      pointDetailsdialog: false,
      // 修改对话框
      editdialog: false,
      // 添加对话框
      adddialog: false,
      // 修改对话框表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getpointSearch()
    this.getaListOfRegions()
  },
  methods: {
    // 点位搜索
    async getpointSearch() {
      const res = await PointSearchAPI(this.pointsearchFrom)
      this.pointsearchList = res.currentPageRecords
      this.totalCount = res.totalCount - 0
      // // 北京市-市辖区-西城区-
      // this.pointsearchList.map(item => {
      //   item.diqu = item.addr.subString(0, 11)
      // })
      // console.log(this.pointsearchList)
    },
    // 搜索
    async getaListOfRegions() {
      const res = await aListOfRegions({ pageIndex: 1, pageSize: 100000 })
      this.search = res.currentPageRecords

      // console.log(this.search)
    },
    searchList() {
      this.getpointSearch()
    },
    // 分页区域功能
    handleSizeChange(newSize) {
      this.pointsearchFrom.pageSize = newSize
      this.getpointSearch()
    },
    handleCurrentChange(newNum) {
      this.pointsearchFrom.pageIndex = newNum
      this.getpointSearch()
    },
    // 点位详情按钮
    async seeDetails(row) {
      this.pointDetailsdialog = true
      const res = await pointDetailsAPI(row.id)
      this.pointDetails = res
      this.pointDetails.forEach(item => {
        if (item.vmStatus === 0) {
          item.state = '未投放'
        } else if (item.vmStatus === 1) {
          item.state = '运营'
        } else {
          item.state = '扯机'
        }
        item.lastSupplyTime = item.lastSupplyTime.replace(/T/g, ':')
      })
    },
    // 修改按钮
    async editList(row) {
      this.editdialog = true
      console.log(row)
      const res1 = await listOfBusinessDistrictsAPI()
      this.shopping = res1
      const res2 = await partnersAPI()
      this.partners = res2.currentPageRecords
      this.editFrom.businessId = row.businessType.id
      this.editFrom.ownerName = row.ownerName
      this.editFrom.name = row.name
      this.editFrom.regionId = row.region.id
      this.detailedAddress = region
      this.editFrom.areaCode = row.areaCode - 0
      this.editFrom.ownerId = row.ownerId
      this.editFrom.createUserId = row.createUserId
      this.addrs = row.name
      this.ids = row.id
      console.log(this.values)
      console.log(row.addr.split('-').slice(0, 3))
      this.values = row.addr.split('-').slice(0, 3)
    },
    // 确定更新
    async modifyTheCommit() {
      this.editFrom.addr = this.editFrom.addr.concat(this.values.join('-') + '-' + this.addrs)
      await modifyThePointAPI(this.editFrom, this.ids)
      this.$message.success('更新成功！')
      this.getpointSearch()
      this.editdialog = false
    },
    // 删除按钮
    async deleList(row) {
      const prve = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (this.pointDetails !== []) return this.$message.error('点位下有售货机，不可删除')
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      await deleteAPoint(row.id)
      this.getpointSearch()
      this.$message.success('删除成功了哦～')
    },
    // 新建按钮
    async addList() {
      this.adddialog = true
      const res1 = await listOfBusinessDistrictsAPI()
      this.shopping = res1
      console.log(res1)
      const res2 = await partnersAPI()
      this.partners = res2.currentPageRecords
      this.detailedAddress = region
      console.log(this.detailedAddress)
      console.log(this.partners)
    },
    async confirmTheAddition() {
      this.addFrom.addr = this.addFrom.addr.concat('-' + this.addrs)
      console.log(this.addFrom)
      await newPointsAddedAPI(this.addFrom)
      this.$message.success('更新成功！')
      this.getpointSearch()
      this.adddialog = false
    },
    // 确认新增
    partnersChange() {
      this.addFrom.areaCode = this.values[2] - 0
      this.addFrom.addr = this.$refs.ascriptionref.getCheckedNodes()[0].pathLabels.join('-')
      console.log(this.addFrom.addr)
    },
    editclose() {
      this.$refs.ruleForm.resetFields()
      this.editFrom = {}
    },
    addclose() {
      this.$refs.ruleForm.resetFields()
      this.addFrom = {}
    }
  }

}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;
}
.input1{
  width: 200px;
 ::v-deep .el-input__inner{
    height: 30px;
  }
}
.el-button {
  margin-top: 3px;
}
.btns{
  width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    color:#fff;
    font-size: 14px;
}
.el-link {
  margin-right: 10px;
}
.el-select{
  width: 100%;
}
.el-cascader{
  width: 100%;
}
</style>
